<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
</head>
<body>
	<a id="test-link" href="#">点击</a>
	<div>
		<p>mousemove:<span id="testMouseMoveSpan"></span></p>
		<div id="testMouseMoveDiv" style="border: 1px red solid;height: 400px;width: 500px">

		</div>
	</div>

	用户名<input id="test-input">
	<div>
		<button id="button1" type="button">按钮1</button>
		<button id="button2" type="button">按钮2</button>
		<button id="button3" type="button">按钮3</button>
	</div>
</body>
<script>
	//初始化函数，在DOM加载完毕后执行
	$(function () {
		$("#testMouseMoveDiv").mousemove(function (event) {
			let content = "pageX:" + event.pageX + ",pageY:" + event.pageY;
			$("#testMouseMoveSpan").text(content);
		})
	});
	 let a = $("#test-link");
	//以下两种写法是等价的
	// a.on("click",function () {
	// 	alert("Hello!");
	// });
	// a.click(function () {
	// 	alert("Hello,Word!");
	// });
	/**
   鼠标事件
		 click: 鼠标单击时触发；
		 dblclick：鼠标双击时触发；
		 mouseenter：鼠标进入时触发；
		 mouseleave：鼠标移出时触发；
		 mousemove：鼠标在DOM内部移动时触发；
		 hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

	 键盘事件
		 键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
		 keydown：键盘按下时触发；
		 keyup：键盘松开时触发；
		 keypress：按一次键后触发。

	 其他事件
		 focus：当DOM获得焦点时触发；
		 blur：当DOM失去焦点时触发；
		 change：当<input>、<select>或<textarea>的内容改变时触发；
		 submit：当<form>提交时触发；
		 ready：当页面被载入并且DOM树完成初始化后触发。
	   ready:仅作用于document对象。
	      由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。
	      假设我们想给一个<form>表单绑定submit事件，下面的代码没有预期的效果：
	 */

	// 事件参数
	// 有时候如 mousemove / keypress 我们需要获取鼠标和按键的值，否则监听这些事件就没有意思
	// 我们可以传入event对象作为参数，来获取一些信息

	// 取消事件绑定
	// off() 方法可以取消事件的绑定
	function hello() {
		console.log("Hello,World!");
	}
	//绑定事件
	a.click(hello);
	//取消绑定事件,10秒后
	setTimeout(function () {
		a.off("click",hello);
	},10000)

	//事件的触发条件
	//事件总是由用户触发，并且执行,代码改变text的值不能触发事件,如果想让代码改变text仍然可以触发事件，调用change()方法
	let input = $("#test-input");
	input.change(function () {
		console.log("Jquery")
	});
	input.val("change it");
	//input.change();
	//等价于
	//input.trigger("change");

	//浏览器的安全限制
	//javaScript代码只能由用户触发 如 window.open()
	$(function () {
		window.open();
	})

	//绑定button事件
	let button1 = $("#button1");
	let button2 = $("#button2");
	let button3 = $("#button3");

	function testPopup() {
		window.open("http://www.baidu.com");
	}
	//不执行
	button1.click(testPopup());
	//执行
	button2.click(function () {
		testPopup();
	});
	//不执行
	button2.click(function () {
		setTimeout(testPopup,2000);
	});
</script>
</html>